<template>
	<view class="dialResult-container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="display: flex;justify-content: flex-end;margin-bottom: 10rpx;">
			<view class="" @tap="dialInfoModal = true" style="font-size: 14px;">拨号须知</view>
		</view>
		<!-- #endif -->
		<view class="dialResult-nav">
			<u-grid :border="false" @click="click" col="4">
				<u-grid-item>
					<text style="color: #000;font-weight: 600;">{{resultList.num}}</text>
					<text class="grid-text">拨号</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #0066FF;font-weight: 600;">{{resultList.successNum}}</text>
					<text class="grid-text">已拨通</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #fe020e;font-weight: 600;">{{resultList.errorNum}}</text>
					<text class="grid-text">未拨通</text>
				</u-grid-item>
				<u-grid-item>
					<text style="color: #3aa74a;font-weight: 600;">{{resultList.netNum}}</text>
					<text class="grid-text">已联网</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="dialResult-main">
			<view class="dialInfo-item-box" v-for="(item,index) in resultList.list" :key="index">
				<view class="dialInfo-item-nav">
					<view class="nav-left">
						<view class="network">
							<text>网卡：</text>
							<text>{{item[0].ifName}}</text>
						</view>
						<view class="rate">
							<text>速率：</text>
							<text>{{item[0].speed}}M</text>
						</view>
					</view>
					<view class="nav-right" v-if="resultList.timingtime > 0">
						<text style="color: #0066FF;">{{isTime}}s</text>后，自动刷新
					</view>
				</view>
				<!-- <view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">共{{item.children.length}}条线路</view> -->
				<view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">共{{item.length}}条线路</view>
				<view class="dialInfo-table">
					<view class="tr bg-w">
						<view class="th flex-center" style="width: 20%;">序号</view>
						<view class="th" style="width: 50%;">拨号信息</view>
						<view class="th" style=""></view>
						<view class="th flex-center">拨号结果</view>
					</view>
					<view class="tr" v-for="(val,ind) in item">
						<view class="td flex-center" style="text-align: center;width: 20%;">{{ind + 1}}</view>
						<view class="td" style="width: 50%;margin: 10rpx 0;">
							<view class="">{{val.vlanAccount}}</view>
							<view class="" style="color: #999;font-size: 20rpx;">密码:{{val.vlanPassword}}</view>
						</view>
						<view class="td" style="color: #999;">vlan ID: {{val.vlanId}}</view>
						<!-- <view class="td flex-center" style="text-align: center;color: #0066FF;">拨号中</view> -->
						<view class="td flex-center" :style="{color:dialResultColor[val.result]}"
							style="text-align: center;font-size: 20rpx;">
							{{dialResult[val.result]}}/{{dialNet[val.onNet]}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="">
				<u-button type="warning" customStyle="width: 300rpx;font-weight:600" color="#979797" text="调整线路"
					@click="handleEditLine"></u-button>
			</view>
			<view class="">
				<u-button type="warning" customStyle="width: 300rpx;font-weight:600" color="#0066FF" text="确认提交"
					@click="handleNext"></u-button>
			</view>
		</view>
		<u-modal :show="dialInfoModal" title="拨号须知" @cancel="dialInfoModal = false" @confirm="dialInfoModal = false">
			<view class="">
				<view class="">1.拨号进行中时间为10-15分钟，请耐心等待~</view>
				<view class="">2.拨号信息设置完成后请点击“确认提交等待下发业务，设置完成后请勿随意调整线路!</view>
				<view class="">3.“建议调整时间段:00:00-11:0014:00-17:00，不可随意增减线路数量影响收益”!!</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dialInfoModal: false,
				sn: '32_HH_CC57C84B7F30C5AE-DISKSN',
				resultList: {},
				dialResult: ['拨号中', '拨号成功', '拨号失败'],
				dialResultColor: ['#0066FF', '#45ca57', '#da080c'],
				dialNet: ['未联网', '已联网'],
				isTime: 60,
			};
		},
		onLoad(options) {
			this.sn = options.sn
			this.netType = options.netType
		},
		onShow() {
			this.getResult()
		},
		onNavigationBarButtonTap() {
			this.dialInfoModal = true
		},
		onHide() {
			clearInterval(this.IntervalTime)
		},
		beforeDestroy() {
			clearInterval(this.IntervalTime)
		},
		methods: {
			// 确认提交
			handleNext() {
				this.$fun.jump(`/pages/equipment/equipment`)
			},
			// 调整线路
			handleEditLine() {
				this.$fun.jump(`/pageC/dialInfo/dialInfo?sn=${this.sn}&netType=${this.netType}`)
			},
			// 获取拨号结果
			async getResult() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await this.$fun.ajax.post('butt/queryDialResult', {
					sn: this.sn
				})
				if (res && res.code == 1) {
					uni.hideLoading()
					// 数据去重
					// let newArr = []
					// res.data.vlanInfoList.forEach((item=>{
					// 	const isFlag = newArr.find(i=>i.ifName == item.ifName)
					// 	if(!isFlag){
					// 		newArr.push(item)
					// 	}
					// }))
					// newArr.forEach((item=>{
					// 	item.children = []
					// 	res.data.vlanInfoList.forEach(v=>{
					// 		if(item.ifName == v.ifName){
					// 			item.children.push(v)
					// 		}
					// 	})
					// }))
					// res.data.nicList = newArr
					this.resultList = res.data
					this.isTime = res.data.timingtime
					if (res.data.timingtime > 0) {
						this.IntervalTime = setInterval(() => {
							if (this.isTime <= 0) {
								clearInterval(this.IntervalTime)
								this.isTime = 60
								this.getResult()
							}
							this.isTime--
						}, 1000)
					}

				}
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;
	}

	.dialResult-container {
		padding: 20rpx 20rpx 100rpx;

		.dialResult-nav {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;

			.grid-text {
				color: #999;
				font-size: 14px;
			}
		}

		.dialResult-main {
			.dialInfo-item-box {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.dialInfo-item-nav {
					display: flex;
					justify-content: space-between;
					font-size: 22rpx;

					.nav-left {
						display: flex;
					}

					.nav-right {
						color: #999;
					}

					.network {
						margin-right: 20rpx;
						color: #0066FF;
					}

					.rate {}
				}

				.dialInfo-table {
					font-size: 24rpx;

					.tr {
						display: flex;
						width: 100%;
						justify-content: center;
						height: 60rpx;
						align-items: center;
						border-radius: 10rpx;
						margin: 15rpx 0;
					}

					.td {
						width: 40%;
						// justify-content: center;
						// text-align: center;
						overflow: hidden;
						margin: 0 10rpx;
						font-size: 22rpx;
						color: #000;
						;
					}

					.flex-center {
						justify-content: center;
						// text-align: center;
					}

					.th {
						width: 40%;
						color: #000;
						display: flex;
						height: 3rem;
						align-items: center;
						overflow: hidden;
						margin: 0 10rpx;
					}

					.bg-w {
						background: #f0f0f0;
					}

					th {
						font-weight: 500;
					}

					td {
						// font-size: 12px;
					}

					.table-placeholder {
						font-size: 14px;
					}

					.delete {
						.u-icon--right {
							flex-direction: column;
						}
					}
				}
			}
		}

		.bottom {
			background-color: #fff;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 50rpx;
			display: flex;
			justify-content: space-between;

		}
	}
</style>